<!-- 发货记录的搜索组件 -->
<template>
  <view class="search_box">
    <nut-searchbar v-model="params.keywords" @search="confirm" placeholder="请输入承运单号/发货人手机/收货人手机"></nut-searchbar>
    <view class="filter" @click="showTop = true">
      <image class="icon" :src="iconSrc" /> <span>筛选</span>
    </view>
  </view>
  <nut-popup position="top" :style="{ height: '300', background: '#f5f5f5' }" v-model:visible="showTop">
    <!-- 搜索框 -->
    <view class="search_box" style="margin-bottom: 24rpx;">
      <nut-searchbar v-model="params.keywords" @search="confirm" placeholder="请输入承运单号/发货人手机/收货人手机"></nut-searchbar>
      <view class="filter" @click="showTop = true">
        <image class="icon" :src="iconSrc" /> <span :style="{ color: showTop ? '#0966FF;' : '#666666;' }">筛选</span>
      </view>
    </view>

    <view class="section popup_tit">运单状态</view>
    <view class="section">
      <nut-button class="btn" :class="{ 'blue-border': params.wxStatus === '4' }"
        @click="pickStatus('运输中')">运输中</nut-button>
      <nut-button class="btn" :class="{ 'blue-border': params.wxStatus === '6' }"
        @click="pickStatus('已完成')">已完成</nut-button>
    </view>

    <view class="section popup_tit">时间范围</view>
    <view class="section">
      <nut-button class="btn" @click="pickTime('近7天')">近7天</nut-button>
      <nut-button class="btn" @click="pickTime('近1个月')">近1个月</nut-button>
      <nut-button class="btn" @click="pickTime('近2个月')">近2个月</nut-button>
      <nut-button class="btn" @click="pickTime('近3个月')">近3个月</nut-button>
    </view>

    <view class="section">
      <picker mode="date" value="{{ params.startBillingTime }}" start="2000-01-01" end="2030-01-01"
        @change="bindDateChange1">
        <view class="picker">
          {{ params.startBillingTime || '开始时间' }}
        </view>
      </picker>
      <span class="line">-</span>
      <picker mode="date" value="{{ params.endBillingTime }}" start="2000-01-01" end="2030-01-01"
        @change="bindDateChange2">
        <view class="picker">
          {{ params.endBillingTime || '结束时间' }}
        </view>
      </picker>
    </view>

    <view class="bot_btn">
      <view class="section">
        <nut-button class="btn btn1" @click="initParams">重置</nut-button>
        <nut-button class="btn btn2" @click="confirm">确定</nut-button>
      </view>
    </view>
  </nut-popup>
</template>

<script setup lang='ts'>
import dayjs from "dayjs";
import { ref, computed, onMounted,  } from "vue";

import useUserStore from '@/store/user'
const store = useUserStore();

import icon1 from '@/assets/images/pages2/willPage/icon1.png';
import icon2 from '@/assets/images/pages2/willPage/icon2.png';


onMounted(() => {
  emit('search', params.value, ''); // 回传类型给子组件
});


const showTop = ref(false); // 弹出层 

const emit = defineEmits(['search']); // 触发父组件里的@search

// 全部的参数
const params = ref({
  btcId: store.btsId,
  work: true,
  keywords: '',
  record: true,
  wxStatus: '8', // 待确认1 待支付2 未发货3 运输中4 待签收5 已完成6 发货记录8（已完成，运输中）
  isReceiving: '', // 待确认1 
  flag: '', // 待支付3
  startBillingTime: '',
  endBillingTime: '',
})


/* 计算img */
const iconSrc = computed(() => {
  if (showTop.value) {
    return icon1;
  } else {
    return icon2;
  }
});

// 获取当前日期
const currentDate = dayjs();
// 计算七天前的日期
const sevenDaysAgo = dayjs().subtract(7, 'day');
// 计算一个月前的日期
const oneMonthAgo = dayjs().subtract(1, 'month');
// 计算两个月前的日期
const twoMonthsAgo = dayjs().subtract(2, 'month');
// 计算三个月前的日期
const threeMonthsAgo = dayjs().subtract(3, 'month');

// 返回格式化后的时间区间值
function bindDateChange1(e) {
  params.value.startBillingTime = e.detail.value;
  console.log('picker1发送选择改变，携带值为', e.detail.value)
}

function bindDateChange2(e) {
  params.value.endBillingTime = e.detail.value;
  console.log('picker2发送选择改变，携带值为', e.detail.value)
}

/* 重置查询参数 */
function initParams() {
  params.value = {
    btcId: store.btsId,
    work: true,
    keywords: '',
    record: true,
    wxStatus: '8', // 待确认1 待支付2 未发货3 运输中4 待签收5 已完成6 发货记录8（已完成，运输中）
    isReceiving: '', // 待确认1 
    flag: '', // 待支付3
    startBillingTime: '',
    endBillingTime: '',
  }
}

/* 点击确认按钮-触发search传值params */
function confirm() {
  emit('search', params.value); // 回传类型给子组件
  showTop.value = false;
}

/* 点击按钮赋值-运输状态 */
function pickStatus(buttonId) {
  switch (buttonId) {
    case '运输中':
      params.value.wxStatus = '4'
      break;
    case '已完成':
      params.value.wxStatus = '6'
      break;
    default:
      console.log('其他情况')
      break;
  }
}

/* 点击按钮赋值-时间范围 */
function pickTime(buttonId) {
  switch (buttonId) {
    case '近7天':
      params.value.startBillingTime = sevenDaysAgo.format('YYYY-MM-DD')
      params.value.endBillingTime = currentDate.format('YYYY-MM-DD')
      break;
    case '近1个月':
      params.value.startBillingTime = oneMonthAgo.format('YYYY-MM-DD')
      params.value.endBillingTime = currentDate.format('YYYY-MM-DD')
      break;
    case '近2个月':
      params.value.startBillingTime = twoMonthsAgo.format('YYYY-MM-DD')
      params.value.endBillingTime = currentDate.format('YYYY-MM-DD')
      break;
    case '近3个月':
      params.value.startBillingTime = threeMonthsAgo.format('YYYY-MM-DD')
      params.value.endBillingTime = currentDate.format('YYYY-MM-DD')
      break;
    default:
      console.log('其他情况')
      break;
  }
}



</script>

<style lang="scss">
.search_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 0 12rpx;

  .filter {
    width: 100rpx;
    font-size: 24rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .icon {
      width: 24rpx;
      height: 22rpx;
    }
  }

  .popup_tit {
    font-size: 28rpx;
    font-weight: bold;
    color: #252525;
  }
}





.section {
  width: 702rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0 auto;
  margin-bottom: 24rpx;
  padding: 0 12rpx;
  box-sizing: border-box;

  .line {
    margin: 0 8rpx;
  }

  .btn {
    width: 156rpx;
    height: 75rpx;
    font-size: 28rpx;
    padding: 0;
    border: none;
    margin-right: 24rpx;
  }

  .blue-border {
    border: 1rpx solid #0966ff;
  }


  .picker {
    width: 332rpx;
    height: 72rpx;
    line-height: 72rpx;
    background: #fff;
    color: #C4C4C4;
    text-align: center;
    border-radius: 36rpx;
  }
}

.bot_btn {
  width: 750rpx;
  background: #fff;
  border: 1rpx solid #C4C4C4;

  .section {
    width: 702rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 24rpx auto;
    padding: 0 12rpx;
    box-sizing: border-box;
  }

  .btn {
    width: 344rpx;
    height: 72rpx;
    font-size: 32rpx;
    text-align: center;
  }

  .btn1 {
    border: 1rpx solid #C4C4C4;
    margin-right: 8rpx;
  }

  .btn2 {
    background: #0966ff;
    color: #fff;
  }
}

.nut-list-item {
  background: #f5f5f5;
}

.nut-tab-pane {
  padding: 0 24rpx;
  background: #f5f5f5;
}

.nut-tabs__titles-item__text {
  color: #999999;
  font-size: 24rpx;
}

.nut-tabs-titles-item-color {
  color: #0966FF;
}

.nut-searchbar-width {
  width: 590rpx;
}
</style>